<template>
  <div class="app-container">
    <el-form :model="formData" label-width="120px" label-position="left">
      <el-form-item label="所属大学">
        <el-select v-model="formData.universityId" :filter-method="universityFilter" filterable style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in universityList" :key="item.universityId" :label="item.universityName" :value="item.universityId" />
        </el-select>
      </el-form-item>
      <el-form-item label="分数段位">
        <el-select v-model="formData.collegeLevelId" style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in collegeLevelList" :key="item.collegeLevelId" :label="item.collegeLevelName" :value="item.collegeLevelId" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否参与匹配">
        <el-select v-model="formData.isMatch" style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in isMatchList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否合作">
        <el-select v-model="formData.isCooperation" filterable style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in isCooperationList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否单招">
        <el-select v-model="formData.isSingle" filterable style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in isSingleList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否艺考">
        <el-select v-model="formData.isArt" filterable style="width: 500px;" placeholder="请选择">
          <el-option v-for="item in isArtList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="院校匹配标签">
        <el-select multiple v-model="formData.labels" placeholder="请选择">
          <el-option v-for="item in labelList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
        </el-select>
      </el-form-item>
      <el-form-item label="院校名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="院校招生代码">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="注册码使用次数">
        <el-input v-model="formData.regCodeNum"></el-input>
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button type="primary" :loading="loading" style="width: 200px;" @click.native.prevent="doSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import {
    create
  } from "@/api/college"
  import {
    getAll as getAllUniversity
  } from "@/api/university"
  import {
    getAll as getAllCollegeLevel
  } from "@/api/college_level"
  import {
    errorMsg,
    successMsg
  } from "@/utils/my"
  import {
    getMatch
  } from "@/api/label"

  export default {
    data() {
      return {
        loading: false,
        formData: {
          universityId: '',
          collegeLevelId: '',
          name: '',
          code: '',
          regCodeNum: 0,
          isMatch: 0,
          isCooperation: 0,
          isSingle: 0,
          isArt: 0,
          labels: []
        },
        isMatchList: [
          {id: 0, name: '不匹配'},
          {id: 1, name: '匹配'}
        ],
        isCooperationList: [
          {id: 0, name: '未合作'},
          {id: 1, name: '已合作'}
        ],
        isSingleList: [
          {id: 0, name: '不单招'},
          {id: 1, name: '单招'}
        ],
        isArtList: [
          {id: 0, name: '不艺考'},
          {id: 1, name: '艺考'}
        ],
        labelList: [],
        universityList: [],
        universityAllList: [],
        collegeLevelList: []
      }
    },

    created() {
      this.fetchLabelData()
      this.fetchUniversityData()
      this.fetchCollegeLevelData()
    },

    methods: {

      doSubmit() {
        const that = this
        let d = JSON.parse(JSON.stringify(that.formData))
        if (d.universityId.length <= 0) {
          return errorMsg("请选择所属大学")
        }
        if (d.name.length <= 0) {
          return errorMsg("请输入院校名称")
        }
        if (d.code.length <= 0) {
          return errorMsg("请输入院校招生代码")
        }
        d.collegeLevelId = d.collegeLevelId.length <= 0 ? 0 : parseInt(d.collegeLevelId)
        d.regCodeNum = parseInt(d.regCodeNum)
        that.loading = true
        create(d).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          setTimeout(function() {
            that.$router.push({
              path: "/admin/college/list"
            })
          }, 1000)
        })
      },

      fetchUniversityData() {
        const that = this
        getAllUniversity().then(res => {
          let data = res.data
          for (let i = 0; i <= data.length; i++) {
            that.universityAllList.push(data[i])
          }
        })
      },

      fetchCollegeLevelData() {
        const that = this
        getAllCollegeLevel().then(res => {
          that.collegeLevelList = res.data
        })
      },

      fetchLabelData() {
        const that = this
        getMatch().then(res => {
          that.labelList = res.data
        })
      },

      universityFilter(k = '') {
        const that = this
        let arr = that.universityAllList.filter(item => {
          if (item) {
            return item.universityName.includes(k)
          } else {
            return false
          }
        })
        if (arr.length > 50) {
          that.universityList = arr.slice(0, 50)
        } else {
          that.universityList = arr
        }
      }

    }
  }
</script>

<style>
  .submit-box {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding-right: 20px;
  }
</style>
